/**
 * title: 样式变体
 * description: 展示不同的标签页样式变体，适用于不同的使用场景
 */

import React from 'react';
import { Tabs, Space, Divider } from '../../../';
import type { TabsProps } from 'antd';

const App: React.FC = () => {
  const simpleItems: TabsProps['items'] = [
    { key: '1', label: '选中样式' },
    { key: '2', label: '可选样式二' },
    { key: '3', label: '可选样式三' },
  ];

  const monthItems: TabsProps['items'] = [
    { key: 'week', label: '周' },
    { key: 'month', label: '月' },
    { key: 'year', label: '年' },
  ];

  return (
    <Space direction="vertical" size="large" style={{ width: '100%' }}>
      {/* 默认样式 - 线条式 */}
      <div>
        <h4 style={{ marginBottom: 16 }}>默认样式（线条式）</h4>
        <Tabs 
          defaultActiveKey="1"
          items={simpleItems.map(item => ({
            ...item,
            children: `${item.label}的内容区域`,
          }))}
        />
      </div>

      <Divider />

      {/* 边框样式 */}
      <div>
        <h4 style={{ marginBottom: 16 }}>边框样式</h4>
        <p style={{ color: '#999', fontSize: 12, marginBottom: 12 }}>
          适用于导航栏、筛选器等场景
        </p>
        <Tabs 
          variant="border"
          defaultActiveKey="1"
          items={simpleItems}
        />
      </div>

      <Divider />

      {/* 填充样式（胶囊） */}
      <div>
        <h4 style={{ marginBottom: 16 }}>填充样式（胶囊式）</h4>
        <p style={{ color: '#999', fontSize: 12, marginBottom: 12 }}>
          适用于紧凑型选择器、时间选择等场景
        </p>
        <Tabs 
          variant="filled"
          defaultActiveKey="month"
          items={monthItems}
        />
      </div>

      <Divider />

      {/* 卡片样式 */}
      <div>
        <h4 style={{ marginBottom: 16 }}>卡片样式</h4>
        <p style={{ color: '#999', fontSize: 12, marginBottom: 12 }}>
          适用于容器顶部、页面级导航等场景
        </p>
        <Tabs 
          type="card"
          defaultActiveKey="1"
          items={simpleItems.map(item => ({
            ...item,
            children: `${item.label}的内容区域`,
          }))}
        />
      </div>

      <Divider />

      {/* 对比展示 */}
      <div>
        <h4 style={{ marginBottom: 16 }}>样式对比</h4>
        <Space direction="vertical" size="middle" style={{ width: '100%' }}>
          <div style={{ padding: '12px', background: '#fafafa', borderRadius: 4 }}>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#666' }}>线条式</div>
            <Tabs defaultActiveKey="1" items={simpleItems} />
          </div>
          
          <div style={{ padding: '12px', background: '#fafafa', borderRadius: 4 }}>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#666' }}>边框式</div>
            <Tabs variant="border" defaultActiveKey="1" items={simpleItems} />
          </div>
          
          <div style={{ padding: '12px', background: '#fafafa', borderRadius: 4 }}>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#666' }}>胶囊式</div>
            <Tabs variant="filled" defaultActiveKey="1" items={simpleItems} />
          </div>
        </Space>
      </div>
    </Space>
  );
};

export default App;

